<template>
	<div class="container">
		<el-dialog v-model="dialogTableVisible">
			<yd-form ref="myForm" :options="formOptions" :model="state.extendData">
				<template #form-btn="props">
					<div>
						<el-button class="yd-form-btn" type="primary" @click="handleSearchClick(props.model)">查询</el-button>
					</div>
				</template>
			</yd-form>
			<el-row :gutter="10">
				<el-col v-for="(item, index) in state.moreList" :key="item.code" :span="4">
					<div class="moreData" @click="moreClick(item, index)">{{ item.name }}</div>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

interface ExtendData {
	name: string;
}
interface StateData {
	extendData: ExtendData;
	moreList: any;
}
interface Props {
	data: any[];
}
const props = withDefaults(defineProps<Props>(), {
	data: () => [],
});
const emit = defineEmits<{
	(event: 'handlerMoreClick', row: any, ind: number): void;
}>();

const dialogTableVisible = ref(false);
const state = reactive<StateData>({
	extendData: {
		name: '',
	},
	moreList: [],
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'input',
		label: '',
		prop: 'name',
		placeholder: '输入服务',
	},
]);

function show(isShow: boolean, title?: string, item?: any) {
	state.moreList = props.data;
	state.moreList?.forEach((item: any) => {
		item.name = item.abilityName || item.serviceName;
		item.code = item.abilityCode || item.serviceCode;
	});
	dialogTableVisible.value = isShow;
}
// emit
function handleSearchClick(row: ExtendData) {
	let res = props.data.filter((item: any) => item.name.indexOf(row.name) >= 0);
	state.moreList = res;
}
function moreClick(item: any, ind: number) {
	dialogTableVisible.value = false;
	emit('handlerMoreClick', item, ind);
}

defineExpose({
	show,
});
</script>
<style scoped lang="scss">
.container {
	.moreData {
		background: rgba($color: #fff, $alpha: 0.1);
		border-radius: 6px;
		font-size: 14px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 7px 28px;
		margin-top: 10px;
		cursor: pointer;
		&:hover {
			background-color: #0a4d8f;
		}
	}
	.active {
		background-color: #0a4d8f;
	}
}
.el-input {
	width: 300px;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
</style>
